<template>
  <div id="app">
    <el-container class="main">

      <el-header class="header_div flex_ac">

        <div class="flex_ac left">
          <div class="left_title">平台管理端</div>
          <a href="javascript:;" @click="$router.go(-1)"><img src="@/assets/back.png" class="nav_close"></a>
          <a href="javascript:;" @click="isCollapse = !isCollapse"><img src="@/assets/nav_close.png"
              :class="isCollapse ? 'isCollapse' : ''" class="nav_close"></a>
          <!-- <span v-for="(item,index) in cur_path" :key="index" v-if="index<cur_path.length-1">{{item}}/</span><template v-for="(item,index) in cur_path" v-if="cur_path.length>=2 && index==cur_path.length-1">{{item}}</template>
-->
        </div>
        <div class="margin_a flex_ac right">
          <!-- <a href=""><i class="el-icon-search"></i></a> -->
          <!-- <router-link class="margin_l30" :to="{path:'/duban/daiban'}" v-if="have_auth('/duban/daiban')">我的审批<el-badge style="margin-left: 5px;" :value="top_data.db_num || 0" /></router-link>
           <router-link class="margin_l30" :to="{path:'/system/msg'}">通知消息<el-badge style="margin-left: 5px;" :value="top_data.message_num || 0" /></router-link>

 -->

          <!-- <img src="@/assets/avatar.png" class="avatar" v-if="!$store.state.userinfo.avatar">
           <img :src="$store.state.userinfo.avatar" v-if="$store.state.userinfo.avatar" class="avatar"> -->
          <span class="margin_l30">{{ $store.state.userinfo.realname || $store.state.userinfo.nickname || '无姓名'
            }}</span>

          <a href="javascript:;" class="margin_l10" @click="try_password">修改密码</a>

          <a href="javascript:;" class="margin_l10" @click="login_out"><i class="el-icon-switch-button"></i></a>
        </div>
      </el-header>

      <el-container style="position: relative;">

        <el-aside width="250px" class="aside" :class="isCollapse ? 'isCollapse' : ''">
          <div class="aside-content">
            <a href="javascript:;" @click="$router.push('/')" class="flex_ac_jc logo_tt">
              <img src="@/assets/pinggu/logo.png" class="logo" alt="">
            </a>
            <el-menu :default-active="$route.path" class="menu" @open="handleOpen" @close="handleClose"
              background-color="#325AED" :collapse="isCollapse" text-color="#fff" unique-opened
              :collapse-transition="false" active-text-color="#fff" router>
              <template v-for="(item, index) in list">
                <!-- && have_auth(item.url) -->
                <el-menu-item :index="item.menu_url" :route="{ path: item.menu_url }"
                  v-if="item.menu_type == 2 && have_auth(item.menu_url)" :key="item.menu_url">
                  <img :src="item.menu_icon" class="menu_icon" alt="">
                  <span slot="title">{{ item.menu_name }} </span>
                </el-menu-item>
                <!-- && have_auth(item.url) -->
                <el-submenu :index="item.menu_url" class="drop_down"
                  v-if="item.menu_type == 1 && have_auth(item.menu_url)" :key="item.menu_url">
                  <template slot="title">
                    <img :src="item.menu_icon" class="menu_icon" alt="">
                    <span>{{ item.menu_name }}</span>
                  </template>
                  <!-- v-if="have_auth(item2.url)" -->
                  <el-menu-item :index="item2.menu_url" v-if="have_auth(item2.menu_url)"
                    :route="{ path: item2.menu_url }" v-for="(item2, index2) in item.children" :key="item2.menu_url">{{
                    item2.menu_name }}</el-menu-item>
                </el-submenu>
              </template>
            </el-menu>
          </div>
        </el-aside>
        <el-container style="position: relative;">

          <el-main class="page_content">
            <div class="mbx_path flex_ac">
              <img src="@/assets/pinggu/home.png" class="home" alt="">
              <span v-for="(item, index) in cur_path" :key="index" v-if="index < cur_path.length - 1">{{ item }} /
              </span>
              <span v-for="(item, index) in cur_path" :key="index" v-if="cur_path.length == 1">{{ item }}</span>
              <template v-for="(item, index) in cur_path" v-if="cur_path.length >= 2 && index == cur_path.length - 1">{{
                item }}</template>
            </div>
            <keep-alive :include="cachedViews">
              <router-view />
            </keep-alive>
          </el-main>
        </el-container>
      </el-container>
    </el-container>



    <el-dialog v-dialogDrag :close-on-click-modal="false" title="修改密码" :visible.sync="open1" width="400px"
      append-to-body>
      <el-form ref="form1" :model="form1" :rules="rules1" label-width="100px">
        <el-row>
          <FormItem label="原密码" :span="24" type="password" :form="form1" prop="or_password" />
          <FormItem label="新密码" :span="24" type="password" :form="form1" prop="password" />
          <FormItem label="确认密码" :span="24" type="password" :form="form1" prop="re_password" />
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open1 = false;">取 消</el-button>
        <el-button type="primary" @click="submitForm2('form1')" :loading="is_ajax">{{ is_ajax ? '修改中···' : '确定'
          }}</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'App',
  data() {
    return {
      cachedViews: ['needCache'],
      isCollapse: false,
      list: [],
      cur_path: [],

      open1: false,
      form1: {
        or_password: '',
        password: '',
        re_password: ""
      },
      // 表单校验
      rules1: {
        or_password: [
          { required: true, message: "原密码不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "新密码不能为空", trigger: "blur" }
        ],
        re_password: [
          { required: true, message: "确认密码不能为空", trigger: "blur" }
        ],
      },
      is_ajax: false,
      top_data: {
        db_num: 0,
        message_num: 0
      }

    }
  },
  created() {
    this.check_login();
    let state = this.getState();
    if (state.token) {
      this.getList();
    }
    this.set_path();
    // this.get_msg_count()

    this.$router.replace({ path: '/' })
  },
  watch: {
    '$route'(to, from) {
      this.set_path()
      this.check_login()
    },
    '$store.state.is_login'() {
      if (this.$store.state.is_login) {
        this.getList();
      }
    }
  },
  methods: {
    get_msg_count() {
      const _this = this;
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.timer = setInterval(() => {
        let state = this.getState();
        if (state.token) {
          this.get_msg()
        }
      }, 10000)
      this.get_msg()
    },
    get_msg() {
      const _this = this;
      _this.axios.get('/manage/project.Index/top_num', {}).then(function (data) {
        if (data) {
          _this.top_data = data.message.top_data;
        }
      }).catch(function (error) {
        console.log(error);
      })
    },
    try_password() {
      this.form1 = {
        or_password: '',
        password: '',
        re_password: ""
      }
      this.open1 = true;
    },
    /** 提交按钮 */
    submitForm2: function (form) {
      const _this = this;
      this.$refs[form].validate(valid => {
        if (valid) {
          this.is_ajax = true;
          let _data = { ..._this[form] };
          let url = "/manage/admin.User/reset_password";

          _this.axios.post(url, _data).then(function (data) {
            if (data) {
              _this.tip_show('操作成功', 'success');
              _this.open1 = false;
            }
            _this.is_ajax = false;
          }).catch(function (error) {
            _this.is_ajax = false
            console.log(error);
          })
        }
      });
    },

    set_path() {
      let routers_list = this.$router.options.routes
      let cur_url = this.$route.path;
      for (let i = 0; i < routers_list.length; i++) {
        if (routers_list[i].path == cur_url) {
          this.cur_path = routers_list[i].exta || []
          break;
        }
      }
    },
    get_auth() {
      let state = this.getState();
      this.axios.get("/manage/admin.RolePermission/role_menu", { params: { roleId: state.role_id } }).then((res) => {
        if (res) {
          this.$store.commit("set_menu", res.message);
          if (this.$route.path != '/duban/detail') {
            let url = this.get_enter_url(res.message, this.$route.path);
            if (url) {
              this.$router.replace({ path: url })
            }
          }
        }
      }).catch((err) => {
        console.log(err);
      });
    },
    getList() {

      // this.list = [
      //   { id: "1", menu_name: '仪表盘', "menu_type": 2, "menu_url": "/", "menu_icon": "https://duban.gcbhshop.com/storage/attachments/2025/10/12/ba5306a5f932f2ba275df8d5e7915d36.png" },
      //   {
      //     id: "2", menu_name: '项目管理', "menu_type": 1, "menu_url": "/project/index", "menu_icon": "https://duban.gcbhshop.com/storage/attachments/2025/10/12/ba5306a5f932f2ba275df8d5e7915d36.png",
      //     children: [
      //       { id: "21", menu_name: '项目列表', "menu_type": 2, "menu_url": "/project/index", "menu_icon": "" },
      //       { id: "22", menu_name: '项目回收站', "menu_type": 2, "menu_url": "/project/delete", "menu_icon": "" },
      //     ]
      //   },

      //   {
      //     id: "100", menu_name: '题库管理', "menu_type": 1, "menu_url": "/answer/index", "menu_icon": "https://duban.gcbhshop.com/storage/attachments/2025/10/12/ba5306a5f932f2ba275df8d5e7915d36.png",
      //     children: [

      //       { id: "101", menu_name: '题库模板', "menu_type": 2, "menu_url": "/answer/index", "menu_icon": "" },
      //       { id: "102", menu_name: '回收站', "menu_type": 2, "menu_url": "/answer/dellist", "menu_icon": "" },
      //     ]
      //   },
      //   {
      //     id: "3", menu_name: '机构管理', "menu_type": 1, "menu_url": "/institution/index", "menu_icon": "https://duban.gcbhshop.com/storage/attachments/2025/10/12/ba5306a5f932f2ba275df8d5e7915d36.png",
      //     children: [
      //       { id: "31", menu_name: '机构列表', "menu_type": 2, "menu_url": "/institution/index", "menu_icon": "" },
      //     ]
      //   },
      //   {
      //     id: "4", menu_name: '政策管理', "menu_type": 1, "menu_url": "/policy_management/policy/index", "menu_icon": "https://duban.gcbhshop.com/storage/attachments/2025/10/12/ba5306a5f932f2ba275df8d5e7915d36.png",
      //     children: [
      //       { id: "31", menu_name: '政策列表', "menu_type": 2, "menu_url": "/policy_management/policy/index", "menu_icon": "" },
      //     ]
      //   },
      //   {
      //     id: "5", menu_name: '机构端', "menu_type": 1, "menu_url": "/institutional-side/index", "menu_icon": "https://duban.gcbhshop.com/storage/attachments/2025/10/12/ba5306a5f932f2ba275df8d5e7915d36.png",
      //     children: [
      //       { id: "51", menu_name: '首页', "menu_type": 2, "menu_url": "/institutional-side/index", "menu_icon": "" },
      //       { id: "52", menu_name: '申报专区', "menu_type": 2, "menu_url": "/institutional-side/project_application/notice", "menu_icon": "" },
      //       { id: "53", menu_name: '待提交的申请', "menu_type": 2, "menu_url": "/institutional-side/project_application/pending", "menu_icon": "" },
      //       { id: "54", menu_name: '我的申请', "menu_type": 2, "menu_url": "/institutional-side/project_application/list", "menu_icon": "" },
      //     ]
      //   },

      //   {
      //     id: "100", menu_name: '模板演示', "menu_type": 1, "menu_url": "/template/index", "menu_icon": "https://duban.gcbhshop.com/storage/attachments/2025/10/12/ba5306a5f932f2ba275df8d5e7915d36.png",
      //     children: [
      //       { id: "121", menu_name: '列表模板', "menu_type": 2, "menu_url": "/template/index", "menu_icon": "" },
      //     ]
      //   },


      //   {
      //     id: "3", menu_name: '数据字典', "menu_type": 1, "menu_url": "/dictionary/type", "menu_icon": "https://duban.gcbhshop.com/storage/attachments/2025/10/12/ba5306a5f932f2ba275df8d5e7915d36.png",
      //     children: [
      //       { id: "31", menu_name: '机构类型', "menu_type": 2, "menu_url": "/dictionary/type", "menu_icon": "" },
      //       { id: "32", menu_name: '督办来源', "menu_type": 2, "menu_url": "/dictionary/from", "menu_icon": "" },
      //       { id: "33", menu_name: '反馈次数', "menu_type": 2, "menu_url": "/dictionary/feed", "menu_icon": "" },
      //       { id: "35", menu_name: '政策分类', "menu_type": 2, "menu_url": "/dictionary/policy-category", "menu_icon": "" },
      //     ]
      //   },
      //   {
      //     id: "4", menu_name: '系统管理', "menu_type": 1, "menu_url": "/system/index", "menu_icon": "https://duban.gcbhshop.com/storage/attachments/2025/10/12/ba5306a5f932f2ba275df8d5e7915d36.png",
      //     children: [
      //       { id: "41", menu_name: '菜单管理', "menu_type": 2, "menu_url": "/system/menu", "menu_icon": "" },
      //       { id: "42", menu_name: '角色管理', "menu_type": 2, "menu_url": "/system/role", "menu_icon": "" },
      //       { id: "42", menu_name: '人员管理', "menu_type": 2, "menu_url": "/system/user", "menu_icon": "" },
      //     ]
      //   },
      // ]
      // this.$forceUpdate()
      this.axios.get("/manage/admin.Menu/index", {}).then((res) => {
          if (res) {
            this.list = res.message;
            let  state=this.getState();
            if(this.$store.state.menu.length==0 && state.token){
              this.get_auth();
            }
          }
      }).catch((err) => {
          console.log(err);
      });
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    check_login() {
      console.log(this.$route)
      // 机构登录、注册和忘记密码页面不需要检查登录状态
      if (this.$route.path != '/login') {
        let state = this.getState();
        if (state.token) {
          this.$store.commit('userinfo', state)
        } else {
          this.$router.replace({ path: '/login' })
        }
      }
    },
    login_out() {
      const _this = this;
      this.$confirm('是否确认退出登录?', "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        _this.setState('');
        _this.setheader();
        _this.check_login();
        _this.tip_show('退出成功', 'success')
      })
    }
  }
}
</script>

<style lang="scss">
.main {
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

.left_title {
  width: 230px;
  font-size: 24px;
  color: #FFFFFF;
  font-weight: bold;
}

.logo_tt {
  font-size: 18px;
  color: #FFFFFF;
  padding: 15px 0;
}

.menu_icon {
  width: 18px;
  height: 18px;
  margin-right: 5px
}

.logo_tt .logo {
  height: 110px;
  margin-right: 24px;
}

.menu {
  border-right: none;
}

// background-image: url(./assets/duban/menu_bg.png);
.aside {
  background-color: #325AED;
  background-position: bottom center;
  background-size: 100%;
  background-repeat: no-repeat;
}

.aside-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header_div {
  background: #056DFF;
  font-size: 14px;
  line-height: 0;
  box-shadow: 0px 4px 20px 1px rgba(0, 0, 0, .08);
}

.header_div .left {
  color: #fff;
}

.header_div .left span {
  color: #fff;
}

.header_div .nav_close {
  height: 20px;
  margin-right: 24px;
  filter: brightness(22);
}

.header_div .right,
.header_div .right a {
  color: #fff;
}

.header_div .right .el-icon-search {
  font-size: 16px;
}

.header_div .right .el-icon-bell {
  font-size: 16px;
  margin-left: 27px;
}

.header_div .right .avatar {
  margin: 0 12px 0 26px;
  height: 24px;
}

.page_content {
  padding: 20px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.aside.isCollapse {
  width: auto !important;
}
.aside.isCollapse .logo_tt{display: none;}
.aside.isCollapse .logo_tt .name {
  display: none
}

.aside.isCollapse .logo_tt img {
  margin-right: 0
}

.nav_close.isCollapse {
  transform: rotate(180deg)
}

.mbx_path {
  font-size: 15px;
  color: #1D2129;
  padding-bottom: 16px;
}

.mbx_path .home {
  height: 18px;
  margin-right: 5px;
}

.mbx_path span {
  color: #4E5969
}

body .el-submenu__title i {
  color: #fff
}

@import './assets/css/common.css';
</style>
